import React from "react";
import { Chart, Tooltip, Geom, Legend, Axis } from "bizcharts";
import autoHeight from "../autoHeight";
import DataSet from "@antv/data-set";

@autoHeight()
class GroupBar extends React.Component {
  render() {
    const { height = 800, padding = [50, 50, 50, 50], borderWidth = 10, data } = this.props;
    // const ds = new DataSet();
    // const dv = ds.createView().source(data);
    // dv.transform({
    //   type: "fold",
    //   fields: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    //   // 展开字段集
    //   key: "x",
    //   // key字段
    //   value: "y" // value字段
    // });
    return (
      <div style={{ height: 500, backgroundColor: "#fff" }}>
        <div>
          <Chart height={500} padding={padding} data={data} forceFit>
            <Axis name="x" />
            <Axis name="y" />
            <Legend />
            <Tooltip
              crosshairs={{
                type: "y"
              }}
            />

            {/* <Geom
              type="interval"
              position="x*y"
              size={borderWidth}
              color={"name"}
              adjust={[
                {
                  type: "dodge",
                  marginRatio: 1 / 32
                }
              ]}
            /> */}
            <Geom type="interval" position="x*y" size={borderWidth + 30} />
          </Chart>
        </div>
      </div>
    );
  }
}

export default GroupBar;
